<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!-- 背景音乐播放器 -->
    <div style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
      <button id="musicToggle" style="background: rgba(106, 13, 173, 0.8); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px;">
        🔊
      </button>
    </div>
    <audio id="bgMusic" src="bgm/心之纲.mp3" loop>
      您的浏览器不支持音频元素。
    </audio>
    <script>
      const audio = document.getElementById('bgMusic');
      const toggleBtn = document.getElementById('musicToggle');
      let isPlaying = false;
      
      // 点击按钮控制音乐播放/暂停
      toggleBtn.addEventListener('click', function() {
        if (isPlaying) {
          audio.pause();
          toggleBtn.textContent = '🔇';
        } else {
          audio.play().then(() => {
            console.log('音乐开始播放');
          }).catch(e => {
            console.error('播放失败:', e);
            alert('音乐播放失败，请检查浏览器权限设置');
          });
          toggleBtn.textContent = '🔊';
        }
        isPlaying = !isPlaying;
      });
      
      // 设置音量
      audio.volume = 0.5;
      
      // 页面加载后尝试播放（用户点击页面时）
      document.addEventListener('click', function initAudio() {
        document.removeEventListener('click', initAudio);
        // 仅在用户点击时尝试初始化
      });
    </script>
  </body>
</html>
